{{- extends "layout/default" }}
{{- import "blocks/underlinenav" }}
{{- block body() }}
<!-- Prefetch links -->
<link rel="prefetch" href="/discovery">

<div class="row justify-content-center g-4">
  <h1 class="mb-0"><i class="bi bi-compass me-2"></i>Discovery</h1>

  <div class="col-12">

    <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto">
      {{- Type := "/discovery/users" }}
      {{- path := slice("/discovery", "/discovery/novel", "/discovery/users") }}
      {{- name := slice("Artworks", "Novels", "Users")}}
      {{- yield UnderlineNav(baseURL="", paths=path, names=name, activeState=Type)}}
      <div class="d-none">
        <p>Artworks</p>
        <p>Novels</p>
        <p>Users</p>
      </div>
    </div>

    <hr class="border-neutral-800 opacity-100 rounded mt-0 mb-3">

    <!-- Main content -->
    <div class="row g-4">
      {{- range .Users }}
        <div class="col-12 col-lg-3">
          <div class="row g-3">
            {* NOTE: the col element needs to wrap the ratio element for whatever reason *}
            <div class="col-2">
              <div class="ratio ratio-1x1">
                <a
                  href="/users/{{ .ID }}"
                  title="{{ .Name }}"
                >
                  <img src="{{ .Avatar }}" alt="User avatar" class="img-fluid rounded-circle object-fit-cover">
                </a>
              </div>
            </div>

            <div class="col-10 d-flex flex-column flex-wrap justify-content-start align-items-start">
              <h3 class="mb-0">
                <a
                  href="/users/{{ .ID }}"
                  title="{{ .Name }}"
                  class="text-body"
                >
                  {{ .Name }}
                </a>
              </h3>

              {{- if .Comment }}
              <p class="text-body-secondary line-clamp-3 w-100 mt-2 mb-0">
                <small>{{ raw: parsePixivRedirect(.Comment) }}</small>
              </p>
              {{- end }}

              <div class="mt-3">
                {{- include "fragments/followButtons" . }}
              </div>
            </div>
          </div>

        </div>
        <div class="col-12 col-lg-9">
          <div id="horizontal-scroll" class="row flex-nowrap overflow-scroll g-3">
            {{- range .Artworks }}
            {* TODO: the fifth artwork is essentially hidden on medium devices and larger due to col-md-3 *}
            <div class="col-7 col-md-3">
              <div class="card h-100 border-0 bg-transparent">
                {{ include "fragments/thumbnail-dt" . }}
                <div class="card-body p-0">
                  {{ include "fragments/thumbnail-tt" . }}
                </div>
              </div>
            </div>
            {{- end }}
          </div>
        </div>
        <hr class="border-neutral-700 opacity-100 rounded mb-0">
      {{- end }}
    </div>

  </div>

  <div class="d-flex justify-content-center">
    <a href="" class="custom-btn-secondary-flex">Refresh</a>
  </div>

</div>
{{- end }}
